require('./PageAddrepair.styl');
import { Boxs, NavBar, Field, TextareaField, Group, TextField, Toast, Dialog } from 'saltui';
import { Storage } from 'clientConfig/util/StoreData'
import { Control } from 'react-keeper';
import ToastError from 'salt-icon/lib/ToastError';
const reactMixin = require('react-mixin');
const { HBox, Box, VBox } = Boxs;
const Actions = require('./actions');
const Store = require('./store');
const Uploadimg = require('components/uploadimg');
const classNames = require("classnames")
const Rollup = require('components/rollup')
const numberRegExp = /^(\d+\.\d*)|(\d+\.)|\d+/;
class Addrepair extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            content: '',
            contacts: Storage.get('user.name'),//联系人
            tel: '',//Storage.get('user.mobile'),
            repairAdd: '',//维修地址
            listdata: [],
            wordcount: 0,//备注内容字计算
        };
        this.handleClickDel = this.handleClickDel.bind(this);
        this.handleBlur = this.handleBlur.bind(this);
    }
    handleChange(name, value) {
        this.setState({
            [name]: value,
        });
    }
    handleOnLeftClick() {
        Control.go(-1)
    }

    //右侧导航按钮
    handleOnRightClick() {
        let t = this;
        let repairCode = t.refs.rollRepair.repairCode;
        let repairType = t.refs.rollRepair.state.msg;
        let { content: description, contacts, tel: phone, repairAdd: repairAddress } = this.state;
        if (!repairCode || !repairType) {
            Dialog.alert({
                title: '提示',
                content: '请选择报修类型',
                onConfirm() {
                },
            });
            return;
        } else if (!repairAddress) {
            Dialog.alert({
                title: '提示',
                content: '请输入报修地址',
                onConfirm() {
                },
            });
            return;
        } else if (!description) {
            Dialog.alert({
                title: '提示',
                content: '请输入报修问题描述',
                onConfirm() {
                },
            });
            return;
        } else if (!contacts) {
            Dialog.alert({
                title: '提示',
                content: '请输入联系人',
                onConfirm() {
                },
            });
            return;
        } else if (!phone) {
            Dialog.alert({
                title: '提示',
                content: '请输入电话号码',
                onConfirm() {
                },
            });
            return;
        }
        //图片
        let formData = this.refs.uploadimg.formData;
        if (!formData) {
            formData = new FormData(this.refs.uploadimg.refs.imageForm)
        }

        Actions.submit({ formData, description, contacts, phone, repairAddress, repairType, repairCode });
    }
    handleTextChange(name, newValue) {
        if (name == 'content' && (this.state.wordcount + newValue.length > 200)) {
            return;
        }
        this.setState({
            [name]: newValue,
        }, () => {
            if (name == 'content') {
                this.setState({ wordcount: this.state.content.length })
            }
        });
    }
    handleNumberChange(newValue) {
        this.setState({
            number: newValue,
        });
    }
    numberFilter(originValue) {
        const matches = originValue.match(numberRegExp);
        let number = '';
        if (matches) {
            number = matches[0];
            let char = originValue.split(number)[1];
            if (char && isNaN(char)) {
                Toast.show({
                    type: 'error',
                    content: '必须数字'
                });
            }
        } else {
            Toast.show({
                type: 'error',
                content: '必须数字'
            });
        }
        return number;
    }
    handleBlur() {
        //删除后只剩下一位数字就失焦
        if (!(/^1[3|4|5|8|7][0-9]\d{4,9}$/.test(this.state.tel))) {
            Toast.show({
                type: 'error',
                content: '请输入正确手机号'
            });
            this.setState({ tel: Storage.get('user.mobile') })
        }
    }
    //备注内容删除
    handleClickDel() {
        this.setState({ wordcount: 0, content: '' })
    }
    render() {
        let t = this;
        return (
            <div className="addrepair">
                <NavBar
                    className={classNames({ "ios-nav-bar": window.isIphone })}
                    isShow={false}
                    title='报修单'
                    onLeftClick={this.handleOnLeftClick.bind(this)}
                    onRightClick={this.handleOnRightClick.bind(this)}
                    rightText='添加'
                />
                <div className="addrepair-content">
                    <Rollup
                        type="class"
                        title="报修类型"
                        listdata={this.state.listdata}
                        ref="rollRepair"
                    />
                    <TextField
                        label="报修地址"
                        value={t.state.repairAdd}
                        onChange={(value) => { t.handleTextChange('repairAdd', value); }}
                        placeholder="请输入报修地址"
                    />
                    <Group.List className="t-MT10 addrepair-comments">
                        <TextareaField
                            layout="h"
                            label=""
                            minRows={3}
                            maxRows={5}
                            placeholder="报修问题描述"
                            value={t.state.content}
                            tip={<div className="word-color">{t.state.activeRead && t.state.content.length > 0 ? <ToastError name="toast-error" fill="#fc3d39" onClick={t.handleClickDel} /> : null}<span>{this.state.wordcount}</span>/200字</div>}
                            onChange={t.handleTextChange.bind(t, 'content')}
                        />
                        <Group.List>
                            <TextField
                                label="联系人"
                                value={t.state.contacts}
                                onChange={(value) => { t.handleTextChange('contacts', value); }}
                                errMsg={t.state.errMsg}
                                toastComponent={Toast}
                                allowClear={false}
                            />
                        </Group.List>
                        <Group.List>
                            <TextField
                                label="电话"
                                value={t.state.tel}
                                onChange={(value) => { t.handleTextChange('tel', value); }}
                                errMsg={t.state.errMsg}
                                toastComponent={Toast}
                                allowClear={false}
                                filter={value => t.numberFilter(value)}
                                onBlur={this.handleBlur}
                            />
                        </Group.List>
                        <Uploadimg ref="uploadimg" />
                    </Group.List>

                </div>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        Actions.getRepairTypeList();
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Addrepair, Reflux.connect(Store));

module.exports = Addrepair;
